<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
		<meta name="csrf-token" content="{{csrf_token()}}" />
		<title>住户 信息完善</title>
		<script src="/js/vue3.min.js"></script>
		<script src="/js/elp2.2.17.js"></script>
		<script src="/js/tailwind.min.js"></script>
		<link rel="stylesheet" href="/css/elp2.2.17.min.css">
		<script type="text/javascript" src="/js/jquery.min.js"></script>
		<style></style>
	</head>
	<body class="backgray">
		{{ csrf_field() }}
		<div class="outdiv">
			<section style="display: flex;justify-content: center;align-items: flex-start;"><section style="width: 7px;transform: rotate(0deg);"><img style="width: 100%;max-width: 100%;display: block;" src="/images/42660700_0.png" alt=""></section><section style="background-color: #4D6BF1;padding: 10px 23px 10px 26px;margin: 5px 0 0 -15px;max-width: 200% !important;"><p style="color: #FFFFFF;font-size: 15px;line-height: 15px;font-family: '思源黑体';letter-spacing: 3px;margin:0;">住户信息完善</p></section></section>
			<div id="app">
				<el-form :model="form" label-width="120px" class="formdiv" label-position="top">
					<el-form-item :label="item.field_name" v-for="(item,index) in fieldlist" :key="index">
						<el-input v-model="form[item.id]" />
					</el-form-item>

					<el-form-item>
						<el-button class="concen" type="success" size="large" style="width:100%;" @click="onSubmit">确认完善</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>

		<script type="text/javascript">
			var users = []
			const App = {
				data: function() {
					return {
						token: null,
						residentid:null,
						fieldlist:[],
						form:{}
					};
				},
				created() {
					this.token = this.GetQueryString("token")
					this.residentid = this.GetQueryString("id")
					this.getfieldjson()
				},
				methods: {
					GetQueryString(name) {
						var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
						var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
						var context = "";
						if (r != null)
							context = decodeURIComponent(r[2]);
						reg = null;
						r = null;
						return context == null || context == "" || context == "undefined" ? "" : context;
					},
					getfieldjson() {
						var that=this
						$.ajax({
							url: "/api/getfieldresidentjson",
							type: "get",
							data:{
								residentid:that.residentid
							},
							headers: {
								"Authorization":"Bearer "+ that.token +""
							},
							success: function(data) {
								that.fieldlist=data.data.field
								let t={}
								that.fieldlist.map((item,index)=>{
									t[item.id]=''
								})
								for(let m in data.data.info){
									if(t.hasOwnProperty(m)){
										t[m]=data.data.info[m]
									}
								}
								that.form=t
								
							}
						})
					},
					onSubmit(){
						var that=this
						$.ajax({
							url: "/api/fieldresidentcreate",
							type: "post",
							data:{
								residentid:that.residentid,
								form:that.form
							},
							headers: {
								"Authorization":"Bearer "+ that.token +""
							},
							success: function(data) {
								if(data.code==1){
									that.$message({
									    message: data.msg,
									    type: 'success',
									})
									setTimeout(function() {
										window.hello.javaMethod('h5')
									}, 1500);
									
								}else{
									that.$message({
									    message: data.msg,
									    type: 'error',
									})
								}
							}
						})
					}
				}
			};
			const app = Vue.createApp(App);
			app.use(ElementPlus);
			app.mount("#app");
		</script>

		<style>
			.outdiv {
				width: 100%;
				min-height: 100vh;
				background-color: #2362b930;
				padding-top:30px;
			}

			.formdiv {
				width: 90vw;
				margin: 0 auto;
				padding: 20px 0;
			}

			.concen {
				margin: 34px auto 20px;
			}
		</style>


	</body>
</html>
